<template>
  <div>
    <h2 v-text="msg" ref="h2"></h2>
    <!-- 普通标签打上ref相当于和id一样的效果 -->
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <!-- 1.当组件标签被id标记后并通过vc.$refs.组件id，则获取的是该组件呈现的真实DOM -->
    <!-- <School id="sch"/> -->

    <!-- 2.当组件标签被ref标记后并通过vc.$refs.组件ref，则获取的是该组件实例 -->
    <School ref="sch"/>
  </div>
</template>

<script>
import School from './components/School';
export default {
  name:'App',
  components:{
    School,
  },
  data(){
    return {
      msg:'Hello,Vue!'
    }
  },
  methods: {
    showDOM(){
      console.log(this.$refs.h2);
      console.log(this.$refs.btn);
      console.log(this.$refs.sch);
    }
  },
}
</script>